<template>
    <div id="app">
        <!-- 引用图标样式 -->
        <!-- <div class="iconfont icon-loading"></div> -->
        <transition name="slide">
            <Toast v-show="isShowToast"></Toast>
        </transition>
        <Topbar :key="keyVal"></Topbar>
        <Header></Header>

        <router-view @updatekey="updatekeyFn" />
        <Footer></Footer>
        <Login v-show="isShowLogin"></Login>
    </div>
</template>
<script>
import Header from '@/components/Header.vue';
import Toast from '@/components/Toast.vue';
import Topbar from '@/components/Topbar.vue';
import Footer from '@/components/Footer';
import Login from '@/components/Login.vue';
import { jinpinAPI } from '@/request/api';
import { mapState } from 'vuex';

export default {
    name: 'Home',
    data() {
        return {
            keyVal: 0,
        };
    },
    components: {
        Header,
        Topbar,
        Footer,
        Login,
        Toast,
    },
    provide() {
        return {
            adds: this,
        };
    },
    computed: {
        ...mapState({
            isShowLogin: state => state.showlogin.isShowLogin,
            isShowToast: state => state.showToast.isShowToast,
        }),
    },
    async created() {
        let res = await jinpinAPI();
        // console.log(res);
    },
    watch: {
        '$route.path': {
            handler(oldVal, newVal) {
                if (oldVal != newVal) {
                    this.keyVal++;
                }
            },
        },
    },
    methods: {
        updatekeyFn() {
            this.keyVal++;
        },
    },
};
</script>

<style lang="less">
// #app {
//   font-family: Avenir, Helvetica, Arial, sans-serif;
//   -webkit-font-smoothing: antialiased;
//   -moz-osx-font-smoothing: grayscale;
//   text-align: center;
//   color: #2c3e50;
// }
/* 入场的起始状态 = 离场的结束状态 */
.slide-enter,
.slide-leave-to {
    opacity: 0;
}

.slide-enter-active,
.slide-leave-active {
    transition: opacity 0.3s linear;
}

.slide-enter-to,
.slide-leave {
    opacity: 1;
}
</style>
